<template>
  <div>
    <NewChapter ref="modalForm" @ok="modalFormOk"></NewChapter>
    <a-form-model>
      <a-row>
        <a-col :md="24" :sm="24" class="collect_tab">
          <a-card :bordered="false">
            <!-- 查询区域 -->
            <p class="title">基本信息</p>
            <a-form-model-item label="模板名称" required>
              <a-input v-model="model.data1" disabled />
            </a-form-model-item>
            <a-form-model-item label="对标标准" required>
              <a-input v-model="model.data1" disabled />
            </a-form-model-item>
            <!-- 操作按钮区域 -->
          </a-card>
        </a-col>
        <a-col :md="24" :sm="24" class="collect_tab">
          <a-card :bordered="false">
            <!-- 查询区域 -->
            <p class="title">封面</p>
            <a-form-model-item label="报告标题" required>
              <a-input v-model="model.data1" placeholder="请输入报告标题" />
            </a-form-model-item>
            <p class="text">报告主体(盖章):</p>
            <p class="text">报告时间段:</p>
            <p class="text">编制日期:</p>
            <!-- 操作按钮区域 -->
          </a-card>
        </a-col>
        <a-col :md="24" :sm="24" class="collect_tab">
          <a-card :bordered="false">
            <!-- 查询区域 -->
            <p class="title">导语</p>
            <span class="tip">如无需导语，清空文本框中的内容即可</span>
            <el-form-item label="活动形式">
              <a-input
                type="textarea"
                v-model="model.source"
                style="min-height: 60px"
              ></a-input>
            </el-form-item>
            <!-- 操作按钮区域 -->
          </a-card>
        </a-col>
        <a-col :md="24" :sm="24" class="collect_tab">
          <a-card :bordered="false">
            <!-- 查询区域 -->
            <p class="title">正文</p>

            <!-- 操作按钮区域 -->
            <a-button type="primary"  @click="handleAdd"> 新增章节 </a-button>
          </a-card>
        </a-col>

          <a-col :md="24" :sm="24" class="collect_tab">
          <a-card :bordered="false">
            <!-- 查询区域 -->
            <p class="title">结语</p>
            <span class="tip">如无需导语，清空文本框中的内容即可</span>
            <el-form-item label="活动形式">
              <a-input
                type="textarea"
                v-model="model.source"
                style="min-height: 60px"
              ></a-input>
            </el-form-item>

            <div class="end">
                <div>法人(签字):</div>
                <div>日期</div>
            </div>
            
            <!-- 操作按钮区域 -->
          </a-card>

        </a-col>
          <a-button type="primary" > 保存模板 </a-button>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import NewChapter from "./NewReports/NewChapter.vue";
import { ListMixin } from "@/mixins/ListMixin";
import bus from "@/bus";
export default {
  mixins: [ListMixin],
  components: {
    NewChapter,
  },
  data() {
    return {
      title: "操作",
      visible: false,
      roleDisabled: false,
      model: {
        source: "",
        data1: "",
        region: "",
        unit: "",
        consume: "",
      },
      layout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 14 },
      },
      confirmLoading: false,
      validatorRules: {
        consume: [{ required: true, message: "请填写消耗量!" }],
        roleCode: [
          { required: true, message: "请输入角色名称!" },
          { min: 0, max: 64, message: "长度不超过 64 个字符", trigger: "blur" },
          { validator: this.validateRoleCode },
        ],
        description: [
          {
            min: 0,
            max: 126,
            message: "长度不超过 126 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.collect_tab {
  margin-bottom: 6px;
  box-shadow: 2px 2px 6px rgb(212, 212, 212);
}
.title {
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid #f8f8f8;
}
.text {
  text-align: left;
}
.tip {
  font-size: 10px;
  display: block;
  color: #999;
  margin-bottom: 10px;
  text-align: left;
}
.end{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-items: flex-start;
    // margin-right: 100px;
    margin: 60px 100px 40px 0;
}
</style>